<template>
    <div>
        <div><h1>房型管理</h1></div>
        <div>
            <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="关键字">
                    <el-input
                        v-model="searchForm.keyWord"
                        placeholder="房型名称"
                        clearable
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                    <el-button type="primary" @click="onAddkind"
                        >添加房型</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="hotelList" stripe style="width: 100%">
                <el-table-column prop="hotelId" label="房型ID" width="80" />
                <el-table-column
                    prop="hotelName"
                    label="房型名称"
                    width="100"
                />
                <el-table-column
                    prop="hotelName"
                    label="所属酒店"
                    width="100"
                />
                <el-table-column prop="房型状态" label="状态" width="140">
                    <template #default="scope">
                        <el-switch
                            active-text="启用"
                            inactive-text="禁用"
                            v-model="scope.row.status"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="hotelName" label="价格" width="100" />
                <el-table-column
                    prop="hotelName"
                    label="房间数量"
                    width="100"
                />
                <el-table-column
                    prop="hotelName"
                    label="空房数量"
                    width="100"
                />
                <el-table-column prop="房间面积" label="房型数量" width="100" />
                <el-table-column prop="hotelName" label="床型" width="100" />
                <el-table-column prop="hotelName" label="窗户" width="100" />
                <el-table-column prop="hotelName" label="电话" width="100" />
                <el-table-column prop="hotelName" label="宽带" width="100" />
                <el-table-column prop="hotelName" label="厕所" width="100" />
                <el-table-column prop="hotelName" label="空调" width="100" />
                <el-table-column prop="hotelName" label="时间" width="160" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="onKindList(scope.row)"
                        >
                            房间管理
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px">
            <el-pagination
                v-model:current-page="searchForm.pageNum"
                v-model:page-size="searchForm.pageSize"
                :page-sizes="[100, 200, 300, 400]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" title="添加房型" width="800">
                <el-form :model="form">
                    <el-form-item
                        label="所属酒店"
                        :label-width="formLabelWidth"
                    >
                        <el-select
                            v-model="form.region"
                            placeholder="请选择酒店"
                            disabled
                        >
                            <el-option label="万达酒店" value="wanda" />
                            <el-option label="宜家酒店" value="yijia" />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="房型名称"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="价格" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="面积" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="床型" :label-width="formLabelWidth">
                        <el-select
                            v-model="form.region"
                            placeholder="请选择床型"
                        >
                            <el-option label="一室一厅" value="wanda" />
                            <el-option label="两室一厅" value="yijia" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图片" :label-width="formLabelWidth">
                        <el-upload
                            v-model:file-list="fileList"
                            action="http://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                        >
                            <el-icon><Plus /></el-icon>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img
                                w-full
                                :src="dialogImageUrl"
                                alt="Preview Image"
                            />
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="窗户" :label-width="formLabelWidth">
                        <el-switch active-text="有" inactive-text="没有"></el-switch>
                    </el-form-item>
                    <el-form-item label="宽带" :label-width="formLabelWidth">
                        <el-switch active-text="有" inactive-text="没有"></el-switch>
                    </el-form-item>
                    <el-form-item label="空调" :label-width="formLabelWidth">
                        <el-switch active-text="有" inactive-text="没有"></el-switch>
                    </el-form-item>
                    <el-form-item label="厕所" :label-width="formLabelWidth">
                        <el-switch active-text="有" inactive-text="没有"></el-switch>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-switch active-text="有" inactive-text="没有"></el-switch>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                            >放弃</el-button
                        >
                        <el-button
                            type="primary"
                            @click="dialogFormVisible = false"
                        >
                            添加
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const hotelList = ref([
    {
        hotelId: 1,
        hotelName: "万达酒店",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 2,
        hotelName: "格林豪泰",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 3,
        hotelName: "国贸酒店",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 4,
        hotelName: "泰达酒单",
        address: "No. 189, Grove St, Los Angeles",
    },
]);
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

const searchForm = ref({
    pageNum: 1,
    pageSize: 10,
    keyWord: "",
});

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref({
    name: "",
    region: "wanda",
});

const onAddkind = () => {
    console.log("添加房型");
    dialogFormVisible.value = true;
};

const onKindList = (row) => {
    console.log(row);
};

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
};
</script>

<style scoped></style>
